<%--
  Created by IntelliJ IDEA.
  User: xugang2
  Date: 2020/7/25
  Time: 16:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <%@ include file="/WEB-INF/pages/include/base_css.jsp"%>

    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }
    </style>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 许可维护</a></div>
        </div>
        <%@include file="/WEB-INF/pages/include/manager_loginbar.jsp"%>

    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <%@include file="/WEB-INF/pages/include/manager_menu.jsp"%>

        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

            <div class="panel panel-default">
                <div class="panel-heading"><i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
                    <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i
                            class="glyphicon glyphicon-question-sign"></i></div>
                </div>
                <div class="panel-body">
                    <ul class="ztree" id="hello"></ul>
                </div>
            </div>
        </div>
    </div>
</div>

<%-- 新增菜单的模态框 --%>
<div class="modal fade" id="addChildMenuModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">新增菜单</h4>
            </div>
            <div class="modal-body">
                <form>
                    <%--  通过隐藏域设置新增菜单的父菜单id --%>
                    <input type="hidden" name="pid"/>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">菜单名称</label>
                        <input type="text" name="name" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="control-label">菜单图标</label>
                        <input name="icon" class="form-control" id="message-text"></input>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" id="addChildMenuBtn" class="btn btn-primary">新增</button>
            </div>
        </div>
    </div>
</div>
<%-- 更新菜单的模态框 --%>
<div class="modal fade" id="updateMenuModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">更新菜单</h4>
            </div>
            <div class="modal-body">
                <form>
                        <%-- 通过隐藏域回显要更新的菜单的id --%>
                        <input type="hidden" name="id"/>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">菜单名称</label>
                        <input type="text" name="name" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="control-label">菜单图标</label>
                        <input name="icon" class="form-control" id="message-text"></input>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" id="updateMenuBtn" class="btn btn-primary">更新</button>
            </div>
        </div>
    </div>
</div>


<%@include file="/WEB-INF/pages/include/base_js.jsp"%>

<script type="text/javascript">
    //异步请求菜单列表数据
    //=====================ztree的helloworld-代码==========================
    /*
        使用ztree的步骤：
            1、在项目中拷贝ztree的jquery的js以及css文件
            2、在需要使用ztree树的页面中引入ztree的文件
            3、准备ztree的配置对象setting[json：配置如何解析生成ztree树]
            4、准备数据源[要显示到ztree树中的数据，以后都是异步加载的]
            5、在页面中准备要显示树的容器
                <ul class="ztree" id="xxx"></ul>
            6、通过ztree的初始化方法，根据配置对象加载数据源数据解析成树状图标签设置到容器中显示
     */
    //按钮组的增删改单击事件
    function addChildMenu(pid){
        //console.log(this); this代表系统window对象  不代表被点击的按钮
        //alert("新增子菜单--"+pid);
        //设置pid回显
        $("#addChildMenuModal form input[name='pid']").val(pid);
        //当次函数调用时，显示收集新增菜单的模态框
        $("#addChildMenuModal").modal("show");
    }
    //给新增模态框的提交按钮绑定单击事件：点击时提交新增请求，成功后关闭模态框并刷新菜单树
    $("#addChildMenuModal #addChildMenuBtn").click(function () {
        $.ajax({
            "type":"post",
            "url":"${PATH}/menu/save",
            "data":$("#addChildMenuModal form").serialize(),
            "success":function (result) {
                if("ok"==result){
                    $("#addChildMenuModal").modal("hide");
                    //重新加载菜单树
                    initMenusTree();
                    layer.msg("新增菜单成功")
                }
            }
        });
    });
    function updateMenu(id){
       // alert("更新--"+id);
        //异步请求获取要更新菜单的信息
        $.ajax({
            "type":"get",
            "url":"${PATH}/menu/menu",
            "data":{"id":id},
            "success":function (menu) {
                //将异步获取到的菜单回显到更新的模态框中显示模态框
                $("#updateMenuModal form input[name='id']").val(menu.id);
                $("#updateMenuModal form input[name='name']").val(menu.name);
                $("#updateMenuModal form input[name='icon']").val(menu.icon);
                $("#updateMenuModal").modal("show");
            }
        });
    }
    //更新模态框的提交按钮的单击事件：提交更新表单中的菜单数据，更新成功后关闭模态框，再刷新菜单树
    $("#updateMenuModal #updateMenuBtn").click(function () {
        $.ajax({
            "type":"post",
            "url":"${PATH}/menu/update",
            "data":$("#updateMenuModal form").serialize(),
            "success":function (result) {
                if("ok"==result){
                    $("#updateMenuModal").modal("hide");
                    initMenusTree();
                    layer.msg("更新成功");
                }
            }
        });
    });


    function deleteMenu(id , menuName){
        //alert("删除--"+id);
        layer.confirm("你真的要删除《 "+ menuName +" 》吗?" , {"icon":3 , "title":"删除确认:"} , function () {
            $.ajax({
                "type":"get",
                "url":"${PATH}/menu/delete",
                "data":{"id":id},
                "success":function (result) {
                    if("ok"==result){
                        initMenusTree();
                        layer.msg("删除成功");
                    }else if(result=="403"){
                        layer.msg("无权删除，请联系管理员解决");
                    }
                }
            });
        });

    }
    //页面打开时需要加载一次
    initMenusTree();
    //加载菜单树的方法
    function initMenusTree(){
        $.ajax({
            "type":"get",
            "url":"${PATH}/menu/menus",
            "success":function (menus) {
                //menus就是多个菜单的json数组
                //给所有的父菜单添加根菜单[最上层的是根节点，中间节点 枝节点  ， 最下层的是 叶子节点  ]
                menus.push({"id":0 , "name":"系统权限菜单" , "icon":"glyphicon glyphicon-list-alt"});
                console.log(menus);
                var setting = {
                    //禁止菜单点击跳转
                    data: {
                        key: {
                            url: "xasdasdads"
                        },
                        simpleData: {
                            enable: true,
                            pIdKey: "pid"//指定菜单如何查找自己的父菜单

                        }
                    },
                    view: {
                        addDiyDom: function (treeId , treeNode){
                            //treeNode:ztree创建的每个li节点对象[属性包括每个节点对应的menu属性,和ztree添加的属性：tId ztree节点id]
                            console.log(treeNode);
                            $("#"+treeNode.tId+"_ico").remove();//代表显示每个节点图标的span标签id值
                            //在菜单名称标签后添加一个按钮
                            //$("#"+treeNode.tId+"_span").after("<button class='btn btn-success'>点我啊</button>");
                            //在菜单名称标签前面添加一个标签用来显示标签的图标
                            $("#"+treeNode.tId+"_span").before("<span class='"+ treeNode.icon +"'></span>");
                        },
                        addHoverDom: function(treeId, treeNode){
                            var aObj = $("#" + treeNode.tId + "_a"); // tId = permissionTree_1, ==> $("#permissionTree_1_a")
                            aObj.attr("href", "javascript:;");
                            aObj.prop("target","");
                            if (treeNode.editNameFlag || $("#btnGroup"+treeNode.tId).length>0) return;
                            var s = '<span id="btnGroup'+treeNode.tId+'">';
                            if ( treeNode.level == 0 ) {
                                //根节点 只能新增
                                s += '<a  onclick="addChildMenu('+ treeNode.id +')" class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="javascript:void(0);" >&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';
                            } else if ( treeNode.level == 1 ) {
                                //枝节点：有子节点和没有子节点
                                //更新
                                s += '<a onclick="updateMenu('+ treeNode.id +')" class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  href="javascript:void(0);" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
                                if (treeNode.children.length == 0) {//枝节点没有子节点
                                    //treeNode.menus.length==0
                                    //删除
                                    s += '<a onclick="deleteMenu('+ treeNode.id +',\''+treeNode.name+'\')" class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="javascript:void(0);" >&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';
                                }
                                //新增
                                s += '<a onclick="addChildMenu('+ treeNode.id +')" class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="javascript:void(0);" >&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';
                            } else if ( treeNode.level == 2 ) {
                                //叶子节点
                                //更新
                                s += '<a  onclick="updateMenu('+ treeNode.id +')" class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  href="javascript:void(0);" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
                                //删除按钮
                                s += '<a onclick="deleteMenu('+ treeNode.id +',\''+treeNode.name+'\')" class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" href="javascript:void(0);">&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';
                            }

                            s += '</span>';
                            aObj.after(s);
                        },
                        removeHoverDom: function(treeId, treeNode){
                            $("#btnGroup"+treeNode.tId).remove();
                        }
                    }
                };
                //如果需要定制ztree树的样式，可以通过setting配置
                //1、给ztree树的所有菜单设置自定义图标

                var zNodes = menus ;
                //初始化生成ztree树   返回ztree树的对象
                //参数1：容器元素对象 ， 参数2：配置 ， 参数3：数据源
                var $ztreeObj = $.fn.zTree.init( $("#hello") , setting  , zNodes );
                //设置ztree树自动展开
                $ztreeObj.expandAll(true);
            }
        });
    }
    //===================ztree的helloworld-代码-end===========================







    $(function () {
        $(".list-group-item").click(function () {
            if ($(this).find("ul")) {
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        /* 权限管理-用户维护模块高亮显示的js脚本
 编写js代码，当前user页面被访问时，需要设置左侧菜单栏 权限管理菜单栏自动展开 */
        $("a:contains('用户维护')").parents("ul:hidden").show();
        //直接显示权限管理的子菜单列表，会导致权限管理单击事件第一次失效，当子菜单列表显示时，移除权限管理的tree-closed class值
        $(".list-group-item:contains(' 权限管理 ')").toggleClass("tree-closed");
        $(".list-group-item a:contains('菜单维护')").css("color","red");
    });
</script>
</body>
</html>

